<template>
  <div class="active-ranking">
    <div class="active-ranking-item" v-for="(item,index) in ranking">
      <div class="series">{{index.toString().length===1?'0'+index:index}}</div>
      <div class="name">{{item.name}}</div>
      <div class="score">{{item.score}}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ActiveRanking',
  data(){
    return{
      ranking:[
        {name:'瀚海网格',score:39},
        {name:'悦和网格',score:36},
        {name:'顺和网格',score:34},
        {name:'飞天苑网格',score:31},
        {name:'公园路网格',score:30},
        // {name:'怡景花园',score:92},
        // {name:'瀚海明珠小区',score:90},
        // {name:'丽景阳光小区',score:88},
        // {name:'润和园',score:85},
        // {name:'金水湾小区',score:82},
        // {name:'常青碧水绿洲',score:80},
      ]
    }
  }
}
</script>
<style scoped lang="scss">
.active-ranking{
  width: 100%;
  height: 100%;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(0,198,255,.3);
  }
  &::-webkit-scrollbar-track{
    border-radius: 3px;
    background: rgba(0,24,48,.3);
  }
  .active-ranking-item{
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    padding-left: 25px;
    background: linear-gradient(to bottom,#006396,#083F6D);
    .series{
      width: 50px;
      height: 100%;
      transform: skew(-15deg);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: bold;
      background: linear-gradient(to bottom,#1777AE,#0C4574);
      margin-right: 25px;
    }
    .name{
      color: #fff;
      flex-grow: 1;
    }
    .score{
      width: 50px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: url("~@/assets/images/rank-normal.png") no-repeat center;
      background-size: 100% 100%;
    }
    &:nth-child(1){
      .score{
        background: url("~@/assets/images/rank-1.png") no-repeat center;
        background-size: 100% 100%;
      }
    }
    &:nth-child(2){
      .score{
        background: url("~@/assets/images/rank-2.png") no-repeat center;
        background-size: 100% 100%;
      }
    }
    &:nth-child(3){
      .score{
        background: url("~@/assets/images/rank-3.png") no-repeat center;
        background-size: 100% 100%;
      }
    }
  }
}
</style>
